<template>
  <view>
    <!-- 产品列表 -->
    <u-empty mode="car" v-if="cart.length === 0" marginTop="200rpx"></u-empty>

    <!-- 外层容器 -->
    <u-swipe-action class="list">
      <!-- 每一行都是一个 item, 里面包着你想显示的内容, 记得在这里就遍历 -->
      <u-swipe-action-item
        :options="options1"
        v-for="item in cart"
        :key="item.goods_id"
        @click="delGoods(item)"
      >
        <view class="item" @longpress="delGoods(item)">
          <u-checkbox-group @change="goodsChange(item)">
            <u-checkbox
              shape="circle"
              activeColor="#EA4350"
              class="left"
              :checked="item.isCheck"
            ></u-checkbox>
          </u-checkbox-group>
          <image class="middle" :src="item.goods_small_logo"></image>
          <view class="right">
            <navigator
              :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
              class="top u-line-2"
            >
              {{ item.goods_name }}
            </navigator>
            <view class="bottom">
              <view class="price">¥{{ item.goods_price }}</view>
              <view class="number-wrap">
                <u-icon name="minus-circle" @click="minusGoods(item)"></u-icon>
                <view class="number">{{ item.number }}</view>
                <u-icon name="plus-circle" @click="plusGoods(item)"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </u-swipe-action-item>
    </u-swipe-action>

    <!-- #ifdef MP-WEIXIN -->
    <view>这是小程序</view>
    <!-- #endif -->

    <!-- #ifdef H5 -->
    <view>这是H5</view>
    <!-- #endif -->

    <!-- 底部提交工具栏 -->
    <view class="submit-bar">
      <u-checkbox-group @change="toggleAllCheck">
        <u-checkbox
          shape="circle"
          activeColor="#EA4350"
          class="left"
          label="全选"
          labelSize="12px"
          :checked="isAllCheck"
        ></u-checkbox>
      </u-checkbox-group>
      <view class="total-price">
        合计: <text class="number">¥ {{ totalPrice }}</text>
      </view>
      <!-- 这里不能用 navigator 因为要根据具体有没有选中买东西的状态,决定是不是要跳转页面
      需要用到编程式导航 this.$router.push-->
      <view class="to-buy" @click="toPay">去结算({{ totalNumber }})</view>
    </view>
  </view>
</template>

<script>
  import { mapState, mapGetters } from "vuex";
  export default {
    data() {
      return {
        options1: [
          {
            text: "删除",
            style: {
              backgroundColor: "#f56c6c",
            },
          },
        ],
      };
    },
    // 希望拿到购物车数据 store.state.cart
    // 可以做个计算属性, 也可以用辅助函数实现
    computed: {
      ...mapState(["cart"]),
      ...mapGetters(["isAllCheck", "totalPrice", "totalNumber"]),
    },
    methods: {
      toPay() {
        if (this.totalNumber > 0) {
          // 跳转支付页
          // 通过编程的方式实现路由跳转, 就叫做编程式导航
          // 区别于模板当中的标签如 a, router-link, navigator
          uni.navigateTo({
            url: "/pages/pay/pay",
          });
        } else {
          uni.showToast({
            title: "请先选择商品",
            icon: "none",
          });
        }
      },
      toggleAllCheck() {
        // 希望影响到所有购物车里面的商品
        // 告诉 mutations 到底全部要选中还是不选中
        // 这个取决于当前 this.isAllCheck 状态
        // 如果当前是全部选中, 反过来点击时就要取消
        // 如果当前没有全部选中, 反过来点击时, 就要全部选中
        console.log("点击时全选的状态", this.isAllCheck);
        console.log("我们希望最终的全选状态", !this.isAllCheck);
        this.$store.commit("toggleAllCheck", !this.isAllCheck);
      },
      goodsChange(goods) {
        console.log(goods);
        // 点击时拿到被点击的商品数据
        // 通知 mutations 修改 state
        this.$store.commit("toggleCheck", goods);
      },
      minusGoods(item) {
        // 如果现在数量已经是 1, 就不应该再减少了
        if (item.number === 1) {
          this.delGoods(item);
          return;
        }
        this.$store.commit("minusGoods", item);
      },
      plusGoods(item) {
        this.$store.commit("plusGoods", item);
      },
      delGoods(item) {
        uni.showModal({
          title: "提示",
          content: "是否确认删除?",
          success: (res) => {
            console.log(res);
            if (res.confirm) {
              console.log("用户点击确定");
              // 删除商品
              this.$store.commit("delGoods", item);
            }
          },
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .list {
    padding-bottom: 100rpx;
  }
  .item {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    padding: 28rpx 35rpx;
    .middle {
      width: 191rpx;
      height: 191rpx;
      flex-shrink: 0;
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 170rpx;
      padding-left: 19rpx;
      .bottom {
        display: flex;
        justify-content: space-between;
        .price {
          color: #ea4350;
        }
        .number-wrap {
          display: flex;
          .number {
            margin: 0 10rpx;
          }
        }
      }
    }
  }
  .submit-bar {
    z-index: 999;
    box-sizing: border-box;
    padding: 0 35rpx;
    height: 83rpx;
    position: fixed;
    // 我们希望, 如果在小程序, bottom:0 如果在h5 bottom 为 50px
    // #ifdef MP-WEIXIN
    bottom: 0;
    // #endif

    /* #ifdef H5*/
    bottom: 50px;
    /* #endif*/

    background-color: #fff;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 26rpx;
    .total-price {
      padding-left: 20rpx;
      flex: 1;
      .number {
        color: #ea4350;
      }
    }

    .to-buy {
      line-height: 52rpx;
      background-color: #ea4350;
      color: #fff;
      padding: 0 26rpx;
      border-radius: 26rpx;
    }
  }
</style>